<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件待办</title>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_1733615_nbs0ssr5ec.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      body {
        background-color: rgb(182, 182, 182);
      }

      .w {
        width: 1200px;
        margin: 0 auto;
        position: relative;
      }

      .top p {
        font-size: 40px;
        color: white;
        line-height: 50px;
        padding: 18px 0;
        margin-left: 20px;
      }

      .top {
        background-color: rgb(42, 42, 42);
      }

      .top input {
        float: right;
      }

      .top .input {
        width: 500px;
        height: 40px;
        border: 1px solid black;
        position: absolute;
        top: 21px;
        right: 50px;
        background-color: white;
        border-radius: 9px;
        box-shadow: 2px 2px 8px 1px;
      }

      .top .input input {
        width: 500px;
        height: 40px;
        border: 0;
        background-color: rgba(0, 0, 0, 0);
        outline: none;
        text-indent: 15px;
        font-size: 20px;
      }

      .title {
        font-size: 40px;
        margin-top: 30px;
      }

      .title p {
        margin-left: 20px;
        margin-bottom: 35px;
      }

      .finish {
        margin-top: 40px;
      }

      .num {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgb(164, 219, 159);
        position: absolute;
        top: 0;
        right: 20px;
        line-height: 40px;
        text-align: center;
        font-size: 25px;
      }

      .clearEvery {
        font-size: 24px;
        color: rgb(109, 109, 109);
        margin: 50px auto;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
      }

      .active {
        height: 55px;
        border-left: 8px solid rgb(42, 207, 130);
        border-radius: 6px;
        background-color: white;
        line-height: 55px;
        font-size: 30px;
        text-indent: 20px;
        margin-bottom: 15px;
      }

      .title i {
        font-size: 30px;
        cursor: pointer;
      }

      .title .del {
        float: right;
        margin-right: 20px;
        font-size: 15px;
        cursor: pointer;
      }

      .finish .finishEvent {
        height: 55px;
        border-left: 8px solid rgb(124, 124, 124);
        border-radius: 6px;
        background-color: rgb(219, 219, 219);
        line-height: 55px;
        font-size: 30px;
        text-indent: 20px;
        margin-bottom: 15px;
        color: rgb(97, 97, 97);
      }
    </style>
  </head>

  <body>
    <div class="top">
      <div class="w">
        <p>ToDoList</p>
        <div class="input">
          <input type="text" placeholder="添加ToDo" />
        </div>
      </div>
    </div>
    <div class="title">
      <div class="w">
        <p>正在进行</p>
        <p class="num count">0</p>
        <ul class="newEvent">
          <!-- <li class="active"><i class="iconfont icon-xuanzekuang"></i><span class="new1">吃饭</span><span
                        class="del">删除</span></li> -->
        </ul>
      </div>
    </div>
    <div class="title">
      <div class="w">
        <p>已经完成</p>
        <p class="num count2">0</p>
        <ul class="finish">
          <!-- <li class="finishEvent"><i class="iconfont icon-xuanzekuanghou"></i><span class="new1">吃饭</span><span
                        class="del">删除</span></li> -->
        </ul>
      </div>
    </div>
    <div class="clearEvery">clear</div>
  </body>
  <script>
    function ToDo() {
      this.input = document.querySelector('input')
      this.i = 1
      this.reg = /^\s+$/ //判断是否为空格字符串
      this.newEvent = document.querySelector('.title .newEvent')
      this.countnum = document.querySelector('.title .count')
      this.clearBtn = document.querySelector('.clearEvery')
      this.finish = document.querySelector('.finish')
      this.countnum2 = document.querySelector('.title .count2')
    }

    ToDo.prototype.init = function () {
      this.click()
      this.clearBtn1()
      this.clearBtn2()
      this.clearEvery()
      window.onkeydown = (ev) => {
        var ev = ev || window.event
        if (ev.keyCode === 13) {
          //判断键盘事件是否为按下空格
          if (this.input.value !== '') {
            //判断input表单中是否输入了内容
            if (this.reg.test(this.input.value)) {
              //判断init中的正则 为拦截输入为空格字符
              console.log(`含有空格，已拦截输出`)
              this.clear()
            } else {
              this.addEvent()
              this.clear()
              let num = this.i++
              console.log(`成功输出${num}次`)

              this.clearBtn1() //删除按钮
              this.clearBtn2()
            }
          } else {
            throw new Error('表单内容不能为空')
          }
        }
      }
    }

    ToDo.prototype.addEvent = function () {
      //添加事件
      let li = document.createElement('li')
      let lis = document.querySelectorAll('.title .newEvent li')
      let index = document.querySelectorAll('.title .newEvent .active i')
      if (index.length > 0) {
        //判断当前的列表插入问题，后添加的在上面
        this.newEvent.insertBefore(li, lis[0])
      } else {
        this.newEvent.appendChild(li)
      }
      li.className = 'active'
      li.innerHTML = `
        <i class="iconfont icon-xuanzekuang"></i>
        <span>${this.input.value}</span>
        <span class="del">删除</span>`
      this.click()
      this.count()
    }

    ToDo.prototype.click = function () {
      //正在进行的点击事件
      let _this = this
      let index = document.querySelectorAll('.title .newEvent .active i')
      for (let i = 0; i < index.length; i++) {
        index[i].onclick = function () {
          // this.parentNode.children[1].innerText
          let li = document.createElement('li')
          let lis = document.querySelectorAll('.title .finish li')
          let index = document.querySelectorAll('.title .finish .finishEvent i')

          if (index.length > 0) {
            //判断当前的列表插入问题，后添加的在上面
            _this.finish.insertBefore(li, lis[0])
          } else {
            _this.finish.appendChild(li)
          }
          li.className = 'finishEvent'
          li.innerHTML = `
                <i class="iconfont icon-xuanzekuanghou"></i>
                <span>${this.parentNode.children[1].innerText}</span>
                <span class="del">删除</span>`

          _this.newEvent.removeChild(this.parentNode)

          _this.count()
          _this.finishCount()

          _this.finishClick()
          _this.clearBtn1()
          _this.clearBtn2()
        }
      }
    }

    ToDo.prototype.finishClick = function () {
      let _this = this
      let index = document.querySelectorAll('.title .finish .finishEvent i')
      for (let i = 0; i < index.length; i++) {
        index[i].onclick = function () {
          // this.parentNode.children[1].innerText
          let li = document.createElement('li')
          let lis = document.querySelectorAll('.title .newEvent li')
          let index = document.querySelectorAll('.title .newEvent .active i')

          if (index.length > 0) {
            //判断当前的列表插入问题，后添加的在上面
            _this.newEvent.insertBefore(li, lis[0])
          } else {
            _this.newEvent.appendChild(li)
          }
          li.className = 'active'
          li.innerHTML = `
                <i class="iconfont icon-xuanzekuang"></i>
                <span>${this.parentNode.children[1].innerText}</span>
                <span class="del">删除</span>`

          _this.finish.removeChild(this.parentNode)

          _this.count()
          _this.finishCount()

          _this.click()
          _this.clearBtn1()
        }
      }
    }

    ToDo.prototype.clearBtn1 = function () {
      let _this = this
      let clearBtn = document.querySelectorAll('.title .newEvent .del')

      for (let i = 0; i < clearBtn.length; i++) {
        clearBtn[i].onclick = function () {
          _this.newEvent.removeChild(this.parentNode)
          _this.count()
        }
      }
    }

    ToDo.prototype.clearBtn2 = function () {
      let _this = this
      let clearBtn = document.querySelectorAll('.title .finish .del')

      for (let i = 0; i < clearBtn.length; i++) {
        clearBtn[i].onclick = function () {
          _this.finish.removeChild(this.parentNode)
          _this.finishCount()
        }
      }
    }

    ToDo.prototype.count = function () {
      //进行计数
      this.countnum.innerHTML = document.querySelectorAll(
        '.title .newEvent li'
      ).length
    }

    ToDo.prototype.finishCount = function () {
      //已完成计数
      this.countnum2.innerHTML = document.querySelectorAll(
        '.title .finish li'
      ).length
    }

    ToDo.prototype.clear = function () {
      this.input.value = ''
    }

    ToDo.prototype.clearEvery = function () {
      let _this = this
      this.clearBtn.onclick = () => {
        if (confirm('点击"确定"将清空全部列表')) {
          let lis = document.querySelectorAll('.title .newEvent li')
          for (let i = 0; i < lis.length; i++) {
            _this.newEvent.removeChild(_this.newEvent.children[0])
          }
          _this.count()
          let lis2 = document.querySelectorAll('.title .finish li')
          for (let i = 0; i < lis2.length; i++) {
            _this.finish.removeChild(_this.finish.children[0])
          }
          _this.finishCount()
        }
      }
    }

    new ToDo().init()
  </script>
</html>
